<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 项目名称weui 组件名称 组件是可复用的
        使用BEM命名规范
        Block  新的区块  cells
        weui-cell 新的区块
            状态 modifier 
    -->
    <!-- <div class="weui-cells">
        <a href=" javascript:;" class="weui-cell weui-cell_access">
           两个盒子 随意  BEM 命名规范
            Element 用两个下划线隔开
            <span class="weui-cell__bd">
                <span>cell standard</span>
            </span>
            <div class="weui-cell__ft">
                说明文字
            </div>
        </a>
    </div> -->

    <!-- BEM css 命名规范套路 烦恼
        Block weui-cell
        Element weui-cell__bd（两个下划线，不要超过两级）
        Modifier 状态 weui-cell_access(单下划线)

    -->
    <!-- 视角不再是标签，也不是css，而是Block
    element hd bd ft __title __desc ....
    状态   _ -->
    <div class="tb-order">
        <div class="tb-order__hd">
            <span class="tb__title">我的订单</span>
            <span class="tb__more">全部 ></span>
        </div>
        <div class="tb-order__bd">
            <a href="#" class="tb-order__item">
                <span>
                    <span class="iconfont icon-31daifukuan"></span>
                    <span class="tb__pointer"></span>
                </span>
                <p class="tb__desc">待付款</p>
            </a>
            <a href="#" class="tb-order__item">
                <span>
                    <span class="iconfont icon-daifahuo"></span>
                    <span class="tb__pointer"></span>
                </span>
                <p class="tb__desc">待发货</p>
            </a>
            <a href="#" class="tb-order__item">
                <span>
                    <span class="iconfont icon-31daishouhuo"></span>
                    <span class="tb__pointer tb__pointer_on">2</span>
                </span>
                <p class="tb__desc">待收货</p>
            </a>
            <a href="#" class="tb-order__item">
                <span>
                    <span class="iconfont icon-xiaoxi"></span>
                    <span class="tb__pointer tb__pointer_on">8</span>
                </span>
                <p class="tb__desc">待评价</p>
            </a>
            <a href="#" class="tb-order__item">
                <span>
                    <span class="iconfont icon-tuikuantuihuo"></span>
                    <span class="tb__pointer"></span>
                </span>
                <p class="tb__desc">退款/售后</p>
            </a>
        </div>
 </div>

</body>
</html>